
<!--
Created by haozhou on 2017/3/14.

-->
<page-container>
  <page-content-box tabs="{{ pageTabs }}"></page-content-box>
</page-container>
<script type="text/ng-template" id="loadBalanceKubeProxyList.html">
  <ng-controller ng-controller="LoadBalanceListCtr">
    <loading ng-if="isLoading"></loading>
    <form-container>
      <form>
        <form-multiple-inline content-type="search">
          <form-multiple-inline-item ng-if="hasUpdatePermission()">
            <button type="button" ui-sref="createKubeLoadBalance({id: loadBalanceCollectionId})">添加&nbsp;<i class="fa fa-plus"></i></button>
          </form-multiple-inline-item>
          <form-multiple-inline-item>
            <form-search-box-with-count text-prefix="共" text-suffix="条信息" ng-model="loadBalanceInfo.searchKeyword" total="{{ loadBalanceInfo.loadBalanceList.length }}" match="{{ loadBalanceInfo.filteredLoadBalanceList.length }}" on-change="filterLoadBalanceList()" placeholder="请输入名称"></form-search-box-with-count>
          </form-multiple-inline-item>
        </form-multiple-inline>
        <form-table ng-model="loadBalanceInfo.filteredLoadBalanceList" template="loadBalanceKubeTable" columns="[
                    { text: '名称', key: 'name', width: '20%' },
                    { text: '内网域名', key: 'dnsName', width: '20%' },
                    { text: '运行集群', key: 'clusterName', width: '18%' },
                    { text: 'namespace', key: 'namespace', width: '18%' },
                    { text: '创建时间', key: 'createTime', width: '20%' },
                    ]" on-delete="deleteLoadBalance(data)" no-delete="noDeleteList" empty-text="{{isLoading ? '正在获取列表，请稍候' : (searchText ? '无匹配信息' : '无信息') }}" param="{loadBalanceCollectionId, onSuccess, onError}"></form-table>
        <script type="text/ng-template" id="loadBalanceKubeTable">
          <div ng-if="column.key === 'name'"><a class="ui-table-link" ng-bind="value" ui-sref="kubeLoadBalanceDetail({ collectionId: param.loadBalanceCollectionId, loadBalanceId: row.id })"></a></div>
          <div ng-if="column.key === 'dnsName'" style="display: flex;">
            <div class="dns-name long-text-wrap" ng-bind="value" title="{{ value }}"></div>
            <div class="fa fa-clipboard" style="top: 50%; left: 50%; margin: auto; margin-left: 5px; cursor: pointer;" ngclipboard="ngclipboard" ngclipboard-success="param.onSuccess(e, value)" ngclipboard-error="param.onError(e)" data-clipboard-text="{{ value }}" tooltip="复制"></div>
          </div>
          <div ng-if="column.key === 'clusterName'" ng-bind="value"></div>
          <div ng-if="column.key === 'namespace'" ng-bind="value"></div>
          <div ng-if="column.key === 'createTime'" ng-bind="value | time"></div>
        </script>
      </form>
    </form-container>
  </ng-controller>
</script>
<script type="text/ng-template" id="loadBalanceNginxList.html">
  <ng-controller ng-controller="LoadBalanceListCtr">
    <loading ng-if="isLoading"></loading>
    <form-container>
      <form>
        <form-multiple-inline content-type="search">
          <form-multiple-inline-item ng-if="hasUpdatePermission()">
            <button type="button" ui-sref="createNginxLoadBalance({id: loadBalanceCollectionId})">添加&nbsp;<i class="fa fa-plus"></i></button>
          </form-multiple-inline-item>
          <form-multiple-inline-item>
            <form-search-box-with-count text-prefix="共" text-suffix="条信息" ng-model="loadBalanceInfo.searchKeyword" total="{{ loadBalanceInfo.loadBalanceList.length }}" match="{{ loadBalanceInfo.filteredLoadBalanceList.length }}" on-change="filterLoadBalanceList()" placeholder="请输入名称"></form-search-box-with-count>
          </form-multiple-inline-item>
        </form-multiple-inline>
        <form-table ng-model="loadBalanceInfo.filteredLoadBalanceList" template="loadBalanceNginxTable" columns="[
                    { text: '名称', key: 'name', width: '20%' },
                    { text: '运行状态', key: 'state', width: '15%' },
                    { text: '运行集群', key: 'clusterName', width: '15%' },
                    { text: 'namespace', key: 'namespace', width: '15%' },
                    { text: '资源占用比', key: 'resourcePercent', width: '15%' },
                    { text: '创建时间', key: 'createTime', width: '20%' },
                    ]" on-delete="deleteLoadBalance(data)" no-delete="noDeleteList" empty-text="{{isLoading ? '正在获取列表，请稍候' : (searchText ? '无匹配信息' : '无信息') }}" param="{loadBalanceCollectionId: loadBalanceCollectionId}"></form-table>
        <script type="text/ng-template" id="loadBalanceNginxTable">
          <div ng-if="column.key === 'name'"><a class="ui-table-link" ng-bind="value" ui-sref="nginxLoadBalanceDetail({ collectionId: param.loadBalanceCollectionId, loadBalanceId: row.id })"></a></div>
          <div ng-if="column.key === 'state'"><span ng-class="({'RUNNING': 'txt-success', 'STOP': 'txt-error', 'DEPLOYING': 'txt-primary', 'ERROR': 'txt-warning', 'STOPPING': 'txt-primary', 'UPDATING': 'txt-primary', 'BACKROLLING': 'txt-primary', 'UPSCALING': 'txt-primary', 'DOWNSCALING': 'txt-primary', 'ABORTING': 'txt-warning', 'BACKROLL_ABORTED': 'txt-warning', 'UPDATE_ABORTED': 'txt-warning'}[value])" ng-bind="({'RUNNING': '运行中', 'STOP': '停止', 'DEPLOYING': '部署中', 'ERROR': '异常', 'STOPPING': '停止中', 'UPDATING': '升级中', 'BACKROLLING': '回滚中', 'UPSCALING': '扩容中', 'DOWNSCALING': '缩容中', 'ABORTING': '中断中', 'BACKROLL_ABORTED': '回滚已中断', 'UPDATE_ABORTED': '升级已中断'}[value])"></span></div>
          <div ng-if="column.key === 'clusterName'" ng-bind="value"></div>
          <div ng-if="column.key === 'namespace'" ng-bind="value"></div>
          <div ng-if="column.key === 'resourcePercent'"><span ng-class="{'txt-normal':value.percent&lt;30,'txt-success':value.percent&gt;=30 &amp;&amp; value.percent&lt;70,'txt-warning':value.percent&gt;=70}"><i class="icon-cpu" ng-if="value.value === 'cpu'" tooltip="CPU：{{value.cpuUsed | number: 2}} / {{value.cpuTotal | number: 2}}（个）"></i><i class="icon-memory" ng-if="value.value === 'memory'" tooltip="内存：{{value.memoryUsed | number: 2}}MB / {{value.memoryTotal | number: 2}}MB"></i>{{value.percent | number: 2}}%</span></div>
          <div ng-if="column.key === 'createTime'" ng-bind="value | time "></div>
        </script>
      </form>
    </form-container>
  </ng-controller>
</script>
<script type="text/ng-template" id="loadBalanceCollectionUsers.html">
  <form-container left-column-width="0">
    <form>
      <collection-member-table collection-id="loadBalanceCollectionId" collection-type="resourceType" on-role-change="setRole(role)" on-no-permission="exitToList()" help-text="有MASTER权限的成员可以查看、添加、修改、删除负载均衡，可以在负载均衡中添加、查看、修改、删除负载均衡实例；有DEVELOPER权限的成员可以查看、修改负载均衡，可以在负载均衡中添加、查看、修改负载均衡实例；有REPORTER权限的成员可以查看负载均衡，可以查看负载均衡中的负载均衡实例。添加、修改或删除负载均衡成员需要MASTER权限。"></collection-member-table>
    </form>
  </form-container>
</script>